<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>零件清单下载</title>
    
    <style type="text/css">
    	*{
    		padding:0;
    		margin: 0;
    	}
    	html, body {
		    font-size: 14px;
		    font-family: "Microsoft YaHei";
           	background-color: #f1f1f1;
	    }
	    .left{
	    	float: left;
	    }
	    .clearfix:before,.clearfix:after{ 
		    content:""; 
		    display:table; 
		} 
		.clearfix:after{clear:both;} 
		.clearfix{ 
		    *zoom:1;/*IE/7/6*/
		}
    	.co-head{
		    background-color: #fff;
		    margin: 15px;
		    padding: 5px 0 20px;
		    text-align: center;
		    position: relative;
		}
		.co-headTop{
			height: 70px;
		    position: relative;
		}
		.co-headCol{
			display: inline-block;
			text-align: left;
		}
		.co-headTitle{
			font-size: 22px;
		    border-right: 3px solid #1EB5AD;
		    padding: 5px 30px 5px 0;
		    margin: 15px 15px 15px 0;
		}
		.co-carType{
		    position: relative;
		    top: 2px;
		}
		.co-carName{
			position: relative;
		    top: 8px;
		}
		.co-headCount{
		    display: inline-block;
		    width: 350px;
		    height: 30px;
		    line-height: 30px;
		    border: 1px solid #1EB5AD;
		    border-radius: 5px;
		    cursor: pointer;
		}
		
		.co-content{
			background-color: #fff;
			padding: 15px;
			margin: 15px;
		}
		.pl-contentTitle{
			margin-bottom: 15px;
		}
		.pl-contentTitle div{
			display: inline-block;
			vertical-align: middle;
		}
		.pl-titleTag{
		    width: 15px;
		    height: 15px;
		    background-color: #1EB5AD;
		    border-radius: 50%;
		}
		.pl-titleName{
			font-weight: bold;
			font-size: 16px;
			width: 80px;
		}
		.pl-titleCount{
		    background-color: #1EB5AD;
		    color: #fff;
		    padding: 2px 18px;
		    margin-left: 30px;
		    font-size: 14px;
		    border-radius: 5px;
		}
		.pl-titleCount div:not(:last-child){
			border-right: 1px solid rgba(255,255,255,0.6);
		    padding-right: 10px;
		}
		.pl-titleCount div:not(:first-child){
		    padding-left: 10px;
		}
		
		.co-contentList table{
			width: 100%;
		    border: 1px solid #ddd;
		    border-spacing: 0;
		    border-collapse: collapse;
		}
		.co-contentList tr{
			height: 38px;
    		line-height: 38px;
    		text-align: center;
			vertical-align: middle;
		}
		.table>tbody>tr:hover{
			background-color: #f1f1f1;
			cursor: pointer;
		}
		.co-contentList thead{
			background-color: #ECEAEA;
		}
		.table>thead>tr>th {
		    border-bottom: 2px solid #ddd;
		}
		.table>tbody>tr:not(:last-child) {
		    border-bottom: 1px solid #ddd;
		}
		.table>tbody>tr>td:not(:last-child),
		.table>thead>tr>th:not(:last-child){
		    border-right: 1px solid #ddd;
		}
    </style>
  </head>
  
  <body>
    <div class="load-body">
  		<div class="co-head">
			<div class="co-headTop">
				<div class="co-headCol co-headTitle">零件清单</div>
				<div class="co-headCol">
					<div class="co-carType">型号：<span>8849-1</span></div>
					<div class="co-carName">伯爵设计的车</div>
				</div>
			</div>
			<div class="co-headCount">造价总计：￥189700.00</div>
		</div>
		
  		<!-- 内外饰 -->
  		<div class="co-content">
  			<div class="clearfix">
	  			<div class="pl-contentTitle left ">
	  				<div class="pl-titleTag"></div>
	  				<div class="pl-titleName">内外饰</div>
	  				<div class="pl-titleCount">
	  					<div>总价：￥60000.00</div>
	  					<div>项目：70</div>
	  				</div>
	  			</div>
  			</div>
  			
  			<div class="co-contentList">
  				<table class="table table-bordered table-hover">
			      <thead>
			        <tr>
			          <th>零件号</th>
			          <th>零件名</th>
			          <th>材料</th>
			          <th>数量（件）</th>
			          <th>单价（元/件）</th>
			          <th>供应商</th>
			          <th>备注</th>
			        </tr>
			      </thead>
			      <tbody>
			        <tr>
			          <td>5305100-530-00</td>
			          <td>副仪表台本体</td>
			          <td>PP+EPDM-T20</td>
			          <td>100</td>
			          <td>1000.00</td>
			          <td>***公有限司</td>
			          <td>备注</td>
			        </tr>
			        <tr>
			          <td>5305100-530-00</td>
			          <td>副仪表台本体</td>
			          <td>PP+EPDM-T20</td>
			          <td>100</td>
			          <td>1000.00</td>
			          <td>***公有限司</td>
			          <td>备注</td>
			        </tr>
			      </tbody>
			    </table>
  			</div>
  		</div><!-- co-content-->
		
	</div>
  </body>
</html>
